<template>
  <el-container>
    <el-aside style="width:200px">
      <Menu/>
    </el-aside>
    <el-main v-loading="loading">
      <div style="display:flex;flex-direction:column;">
        <div id="detail">
          <Info :keys="title" :description="description" :titleID="nodeID" :titleType="selectType"></Info>
        </div>
        <div id="atlas">
          <atlas :nodeID="nodeID" :selectType="selectType" :nodeName="nodeName" v-if="showAtlas"></atlas>
        </div>
        </div>
      </el-main>
  </el-container>
</template>
<script>
import Menu from './common/Menu.vue';
import Info from './common/Info.vue';
import Atlas from './common/Atlas.vue'
import {getNodePropertyByID} from '../api/api.js'

  export default {
  components: { Menu ,Info, Atlas},
    comments: {
      Menu,
      Info,
      Atlas
    },
    data() {
      return {
        title:[],
        description:[],
        nodeID:'',
        selectType:'',
        showAtlas:false,
        loading:true,
        // atlas_loading:true,
        nodeName:''
      }
    },
    methods: {
      getNodePropertyByID(){
        console.log("这里是获取ID和selectType！")
        this.nodeID = this.$route.query.ID
        this.selectType = this.$route.query.selectType
        this.showAtlas = true
        console.log('N1',this.nodeID)
        console.log('N2',this.selectType)
        getNodePropertyByID(this.nodeID,this.selectType).then(response =>{
          const nodeProperty = response.data
          console.log(nodeProperty)
          this.title = Object.keys(nodeProperty)
          this.description = Object.values(nodeProperty)
          this.nodeName = nodeProperty.name
      }).catch(error =>{
        console.error(error)
      })
    },
    },
    mounted() {
      this.getNodePropertyByID(),
      setTimeout(() => {
        // this.showAtlas = true;
        this.loading = false
        }, 2000);

  }
  }
</script>

<style lang="scss">
 .el-container{
  background-color: white;
  .el-main{
    margin-right: 100px;
  }
 }
</style>